$(function(){
	// 定义一个全局变量来存储 Cropper 实例
	let globalCropper = null;
	
	$(function(){
	    $("#quimg,#cha").click(function(){
	        $("#updateimg").css("display","none");
	        // 关闭修改头像框时销毁 Cropper 实例
	        if (globalCropper) {
	            globalCropper.destroy();
	            globalCropper = null;
	        }
	    });
	});
	
	layui.use(function(){
	    var upload = layui.upload;
	    var layer = layui.layer;
	    var element = layui.element;
	    var $ = layui.$;
	
	    // 单图片上传
	    var uploadInst = upload.render({
	        elem: '#upimg',
	        url:'#',
	        before: function(obj){
	            // 预读本地文件示例，不支持ie8
	            obj.preview(function(index, file, result){
	                $("#updateimg").css("display","block");
	                $('#headimg').attr('src', result); // 图片链接（base64）
	                // 销毁旧的 Cropper 实例
	                if (globalCropper) {
	                    globalCropper.destroy();
	                }
	
	                // 开始裁剪
	                globalCropper = crop();
	                globalCropper.replace(result, false);
	            });
	        }
	    });
	
	    var uploadInst = upload.render({
	        elem: '#iocntu',
	        url:'#',
	        before: function(obj){
	            // 预读本地文件示例，不支持ie8
	            obj.preview(function(index, file, result){
	                $("#updateimg").css("display","block");
	                $('#headimg').attr('src', result); // 图片链接（base64）
	                // 销毁旧的 Cropper 实例
	                if (globalCropper) {
	                    globalCropper.destroy();
	                }
	
	                // 开始裁剪
	                globalCropper = crop();
	                globalCropper.replace(result, false);
	            });
	        }
	    });
	});
	
	function crop(){
	    var headimg = document.getElementById("headimg");
	    // 创建 cropper 对象
	    const cropper = new Cropper(headimg, {
	        // 裁剪框比例
	        // NaN 表示任意比例
	        aspectRatio: 1/1,
	        // 视图模式
	        viewMode: 3,
	        // 开启预览效果
	        preview: '#xiaohead',
	        // 拖拽模式
	        dragMode: 'move',
	        reaponsive: true,
	        // 检查图片是否跨域
	        checkCrossOrigin: true,
	        // 是否显示裁剪的虚线
	        guides: false,
	        // 当初始化的时候，是否自动显示裁剪框
	        autoCrop: true,
	        // 当初始化时，裁剪框的大小与原图比例
	        autoCropArea: 1,
	        // 是否移动裁剪框
	        cropBoxMovable: false,
	        // 是否可以调节裁剪框的大小
	        cropBoxResizable: false,
	    });
	    return cropper;
	}
	$("#save").click(function(){
		//获取裁剪后的图片数据
		var cropCanvas=globalCropper.getCroppedCanvas();
		//将裁剪后的图片转换为base64格式
		var croppedimage=cropCanvas.toDataURL("image/jpeg")
		$("#updateimg").css("display","none");
		$('#upimg').attr('src', croppedimage);
	})
})